<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title><script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<style>
			.redBg{
				background-color: red;
			}
			.fontColor{
				color: gold;
			}
		</style>
		<script>
			//1、与内容相关的函数
			function textFun(){
				var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的所有内容，包括了嵌套在内部的标签
				console.log(str1);
				var str2=$("div").text();//获取的是第一个匹配元素的围堵标签中的所有文本，不包含标签的内容
				console.log(str2);
				var str3=$("div").val();//val()只能用在表单项元素中，div不是表单元素，所以val()获取不到任何内容
				var str4=$("input").val();//input是表单项元素，val()可以获取到
				console.log(str3);
				console.log(str4);
			}
			//2、与属性相关的函数
			function attrFun(){
				var img=$("img");
				//设置属性
				img.attr("src","img/cat.jpg");
				img.attr("title","不服！");
				//移除属性
				img.removeAttr("title");
				//获取属性
				var src=img.attr("src");
				var title=img.attr("title");
				console.log(src+"===="+title);
				//获取checked属性使用prop函数，获取到的值是boolean类型，表示是否被选中
				var list=$("input[type='radio']");
				for(var i=0;i<list.length;i++){
					var flag=$(list[i]).prop("checked");
					console.log("checked="+flag);
				}
			}
			//3、与css相关的函数
			function cssFun(){
				//给获取的元素添加、删除、切换已有的样式 PS：样式一定是在样式表中提前定义好的
				$("div").addClass("redBg");
				$("div").addClass("redBg fontColor");
				$("div").removeClass("fontColor");
				$("div").removeClass();//没有参数的时候直接移除所有的样式
				//
				//给所有的元素添加样式，样式直接添加，无需提前定义
				$("input").css("border-color","blue");
				$("input").css({"color":"red","border-color":"green"});
			}
			function changeCss(){
				$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除，如果没有就添加
			}
			/*就緒入口*/
			$(function(){
				cssFun();
			});
		</script>
	</head>
<body>
	<button type="button" onclick="changeCss()">切换div样式</button>
	性别：<input type="radio" value="0" name="gender" checked="checked"/>女
	<input type="radio" value="1" name="gender"/>男
	<img src="img/a.png" title="服不服" />
	<div>div1<button type="button">普通按钮1</button></div>
	<div>div2<button type="button">普通按钮2</button></div>
	<input name="userName" value="贾宝玉" />
	<input name="password" value="123456" />
</body>
</html>